import { getWhiteList } from '@/services/whiteIpList';
import { Modal, Table } from 'antd';
import { useEffect, useState } from 'react';

const WhiteListModal = (props) => {
  const [dataList, setDataList] = useState([]);
  const [selectedRows, setSelectedRows] = useState<any>();
  const getDataList = async () => {
    const msg = await getWhiteList();
    if (msg.code == '0') {
      setDataList(msg.data);
    }
  };
  useEffect(() => {
    getDataList();
  }, []);

  const columms: [any] = [
    {
      title: 'ip',
      align: 'center',
      dataIndex: 'ip',
    },
  ];
  const onSubmit = () => {
    let ipList = [];
    selectedRows.map((item) => ipList.push(item.id));
    props.setWhiteList(ipList);
    props.setIsWhiteListShow(false);
  };
  return (
    <Modal
      destroyOnClose
      title="添加白名单"
      open={props.isWhiteListShow}
      onCancel={() => props.setIsWhiteListShow(false)}
      width={580}
      onOk={() => onSubmit()}
    >
      <Table
        rowKey="id"
        dataSource={dataList}
        columns={columms}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
          defaultSelectedRowKeys: props.whiteLists,
        }}
      />
    </Modal>
  );
};
export default WhiteListModal;
